<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="3">
        <p>产品名称:</p>
      </el-col>
      <el-col :span="6"><el-input v-model="goods.name" placeholder="请输入内容"></el-input></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3">
        <p>型号:</p>
      </el-col>
      <el-col :span="6"><el-input v-model="goods.model" placeholder="请输入内容"></el-input></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3"><p>分类:</p></el-col>
      <el-col :span="6"><el-cascader
        :options="categoryOptions"
        :show-all-levels="false"
        change-on-select
      ></el-cascader></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3"><p>副标题:</p></el-col>
      <el-col :span="6"><el-input v-model="goods.caption" placeholder="请输入内容"></el-input></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3"><p>供货价:</p></el-col>
      <el-col :span="6"><el-input v-model="goods.cost" placeholder="请输入内容"></el-input></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3"><p>销售价:</p></el-col>
      <el-col :span="6"><el-input v-model="goods.price" placeholder="请输入内容"></el-input></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3"><p>重量:</p></el-col>
      <el-col :span="6"><el-input v-model="goods.weight" placeholder="请输入内容"></el-input></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3"><p>单位:</p></el-col>
      <el-col :span="6"><el-input v-model="goods.unit" placeholder="请输入内容"></el-input></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4"><el-checkbox v-model="goods.hasSpec">是否有规格</el-checkbox></el-col>
      <el-col :span="4"><el-checkbox v-model="goods.isDelivery">是否有物流</el-checkbox></el-col>
      <el-col :span="4"><el-checkbox v-model="goods.isMarketable">是否上架</el-checkbox></el-col>
    </el-row>
    <el-row :gutter="20" v-if="!goods.hasSpec">
      <el-col :span="3"><p>库存:</p></el-col>
      <el-col :span="6"><el-input v-model="goods.stock" placeholder="请输入内容"></el-input></el-col>
    </el-row>
    <template v-for="(specification, index) in specificationGroup">
      <div class="spec-container">
        <el-row :gutter="20" v-if="goods.hasSpec">
          <el-col :span="3"><p>规格组:</p></el-col>
          <el-col :span="6">
            <!--<el-input v-model="specification.specificationName" @blur="onSpecChange"></el-input>-->
            <el-select v-model="specification.specificationName" clearable placeholder="请选择" @change="onSpecChange">
              <el-option
                v-for="item in specGroupOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-select
              v-model="specification.specificationEntries"
              multiple
              placeholder="请选择"
              @change="onSpecChange">
              <el-option
                v-for="item in specValuesOptions[specification.specificationName]"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="2"><el-button @click.prevent="removeSpec(index)">删除</el-button></el-col>
          <el-col :span="2"><el-button @click="$router.push({ name: 'demo-echarts' })">test</el-button></el-col>
        </el-row>
      </div>
    </template>

    <el-button @click="addSpec" v-if="goods.hasSpec">新增规格组</el-button>

  <el-table
    :data="specTableData"
    border
    style="width: 100%"
    class="specTable"
    v-if="goods.hasSpec">
    <el-table-column
      :prop="header.value"
      :label="headerParse(header.name)"
      v-for="(header, index) in specHeader"
      :key="index">
    </el-table-column>

    <el-table-column
      prop="cost"
      label="供货价">
      <template slot-scope="scope">
        <el-input v-model="scope.row.cost" placeholder="供货价"></el-input>
      </template>
    </el-table-column>
    <el-table-column
      prop="price"
      label="销售价">
      <template slot-scope="scope">
        <el-input v-model="scope.row.price" placeholder="销售价"></el-input>
      </template>
    </el-table-column>
    <el-table-column
      label="默认">
      <template slot-scope="scope">
        <el-radio v-model="goods.productDefault" :label="scope.$index">&nbsp</el-radio>
      </template>
    </el-table-column>
    <el-table-column
      prop="enable"
      label="启用">
      <template slot-scope="scope">
        <el-checkbox v-model="scope.row.enable"></el-checkbox>
      </template>
    </el-table-column>

  </el-table>

    <div style="width: 500px">
      <template v-for="(para, index) in paraGroup">
        <el-row :gutter="20">
          <el-col :span="4"><p>参数名</p></el-col>
          <el-col :span="6"><el-input :model="para.name"></el-input></el-col>
          <el-col :span="4"><el-button @click="addSubPara(index)">新增</el-button></el-col>
          <el-col :span="4"><el-button @click="removeParaGroup(index)">删除</el-button></el-col>
        </el-row>
        <template v-for="(entry, subindex) in para.entries">
          <el-row :gutter="20">
            <el-col :span="4"><p></p></el-col>
            <el-col :span="4"><el-input :model="entry.name"></el-input></el-col>
            <el-col :span="6"><el-input :model="entry.value"></el-input></el-col>
            <el-col :span="4"><el-button @click="removeSubPara(index, subindex)">删除</el-button></el-col>
          </el-row>
        </template>
      </template>

      <el-button @click="addParaGroup()">新增参数</el-button>

    </div>

    <div class="product-list">
      商品图片:<el-upload
        action="http://localhost:8080/sdb/file/upload"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :file-list="goods.productImages"
        :on-success="successHandle"
        :on-error="errorHandle"
        :limit="pilimit"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
    </div>

    <div class="product-list">
      介绍图片:<el-upload
      action="http://localhost:8080/sdb/file/upload"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="introHandleRemove"
      :file-list="goods.introProductImages"
      :on-success="introSuccessHandle"
      :on-error="errorHandle"
      :limit="iilimit"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    </div>

    <el-button @click="addGoods()">提交</el-button>

    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

  </div>
</template>

<script>
  // 笛卡尔积
  function cartesianProductOf (array) {
    function addTo (current, args) {
      var i, copy
      var rest = args.slice(1)
      var isLast = !rest.length
      var result = []
      for (i = 0; i < args[0].length; i++) {
        copy = current.slice()
        copy.push(args[0][i])
        if (isLast) {
          result.push(copy)
        } else {
          result = result.concat(addTo(copy, rest))
        }
      }
      return result
    }
    return addTo([], array)
  }
  export default {
    data () {
      return {
        categoryOptions: [],
        paraGroup: [],
        specGroupOptions: [],
        specValuesOptions: {},
        goods: {
          name: '',
          model: '',
          caption: '',
          weight: 0,
          unit: '',
          stock: 0,
          hasSpec: false,
          isDelivery: false,
          isMarketable: false,
          productImages: [],
          introProductImages: [],
          productDefault: 0
        },
        pilimit: 6,
        iilimit: 6,
        dialogImageUrl: '',
        dialogVisible: false,
        specHeader: [
        ],
        specificationGroup: [
          {specificationEntries: []}
        ],
        specTableData: [],
        productImageUrlArr: [],
        introImageUrlArr: []
      }
    },
    computed: {
      // 计算属性的 getter
      reversedMessage: function () {
        // `this` 指向 vm 实例
        return this.message.split('').reverse().join('')
      }
    },
    filters: {
    },
    mounted () {
    },
    methods: {
      addParaGroup: function () {
        this.paraGroup.push({name, entries: []})
      },
      addSubPara: function (index) {
        this.paraGroup[index].entries.push({name: '', value: ''})
      },
      removeSubPara: function (index, subindex) {
        this.paraGroup[index].entries.splice(subindex, 1)
      },
      removeParaGroup: function (index) {
        this.paraGroup.splice(index, 1)
      },
      headerParse: function (value) {
        for (var option of this.specGroupOptions) {
          if (option.value === value) {
            return option.label
          }
        }
        return ''
      },
      specValueParse: function (headerValue, specValue) {
        for (var option of this.specGroupOptions) {
          if (option.value === specValue) {
            return option.label
          }
        }
        return ''
      },
      errorHandle (err, file, fileList) {
        console.log(err)
        this.$message.error(err)
      },
      // 上传成功
      successHandle (response, file, fileList) {
        this.goods.productImages = fileList
      },
      // 上传成功
      introSuccessHandle (response, file, fileList) {
        this.goods.introProductImages = fileList
        console.log(this.goods.introProductImages)
      },
      introHandleRemove (file, fileList) {
        this.goods.introProductImages = fileList
      },
      handleRemove (file, fileList) {
        this.goods.productImages = fileList
      },
      handlePictureCardPreview (file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      addGoods () {
        var productImageUrlArr = []
        for (let product of this.goods.productImages) {
          let response = product.response
          productImageUrlArr.push(response.url)
        }
        var introImageUrlArr = []
        for (let intro of this.goods.introProductImages) {
          let response = intro.response
          introImageUrlArr.push(response.url)
        }
        this.goods.introImageUrlArr = introImageUrlArr
        console.log('goods === ', this.goods)
        console.log('specTableData ===', this.specTableData)
      },
      onSpecChange () {
        let i = 0
        this.specHeader = []
        let specValues = []
        for (let obj of this.specificationGroup) {
          if (obj && obj.specificationName && obj.specificationName !== '') {
            this.specHeader.push({name: obj.specificationName, value: 'spec' + i})
            i++
          }
          let entries = obj.specificationEntries
          let specEntry = []
          for (let entry of entries) {
            specEntry.push(entry)
          }
          if (specEntry.length > 0) {
            specValues.push(specEntry)
          }
        }
        this.specTableData = []
        if (specValues && specValues.length > 0) {
          let productValues = cartesianProductOf(specValues)
          for (let specArr of productValues) {
            let specVal = {}
            let specItemIdx = 0
            let specItemArr = []
            for (let specItem of specArr) {
              let specItemLabel = ''
              for (let svokey in this.specValuesOptions) {
                let svo = this.specValuesOptions[svokey]
                for (let svosub of svo) {
                  if (svosub.value === specItem) {
                    specItemLabel = svosub.label
                    break
                  }
                }
              }
              specVal['spec' + specItemIdx] = specItemLabel
              specItemArr.push(specItem)
              specItemIdx++
            }
            this.specTableData.push(Object.assign({
              cost: '',
              price: '',
              enable: false,
              specIds: ',' + specItemArr.splice(',') + ','
            }, specVal))

            console.log(this.specTableData)
          }
        }
      },
      removeSpec (index) {
        this.specificationGroup.splice(index, 1)
        this.onSpecChange()
      },
      addSpec () {
        this.specificationGroup.push({specificationName: '',
          specificationEntries: []})
      }
    }
  }
</script>

<style lang="scss">
  .spec-container {
    width: 800px;
    p {
      margin-top: 10px;
      margin-left: 18px;
    }
  }

  .specTable {
    margin-top: 10px;
  }

  .product-list {
    margin-top: 10px;
  }


</style>
